<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        .box1{

            background-color: aqua;
            height: 100px;
            display: flex;
            justify-content: space-around;

        }

        .box2{
            background-color: beige;
            height: 100px;
            width: 100px;
        }

        .box3{
            background-color: coral;
            height: 100px;
            width: 100px;
        }

        
        .box4{
            background-color: rgb(54, 46, 43);
            height: 100px;
            width: 100px;
        }

        .box5{
            background-color: rgb(136, 53, 23);
            height: 100px;
            width: 100px;
        }

        .box5:hover{
            background-color: rgb(136, 53, 23);
            /* height: 200px;
            width: 200px; */
            transform: translateX(200px);
            transition: 2s ;
        }

    </style>
</head>

<body>
    <div class="box1">

        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>

    </div>
</body>

</html>